<!DOCTYPE html>
<html>
	<head>
	  <meta charset="utf-8">
	  <title>test</title>
	  <meta name="renderer" content="webkit">
	  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
	  <link rel="stylesheet" href="../../layuiadmin/layui/css/layui.css" media="all">
	  <link rel="stylesheet" href="../../layuiadmin/style/admin.css" media="all">
	  <link rel="stylesheet" href="../../layuiadmin/style/login.css" media="all">
	  	<!-- 滑动条-->
	  <link rel="stylesheet" href="../../public/plugins/rangeslider/rangeslider.css" />
	  <link rel="stylesheet" href="../../public/res/css/g.css" media="all">
	  <link rel="stylesheet" href="../../public/res/css/pGis.css" media="all">
	  <link rel="stylesheet" href="../../public/plugins/swiper/swiper-3.2.7.min.css" />
	  <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=40GWXiduhOft266lK4N1dopL"></script>
	</head>
	<body>
		<div class="content">
			<div class="layui-row layui-col-space1 par-box">
				<div class="left_box">
					<div class="case_grid_box">
						<button class="layui-btn layui-btn-normal hide"  name="searBtn1"><i class="zkuasgm-icon">&#xe626;</i></button>
						<button class="layui-btn layui-btn-fluid layui-btn-normal" title="已选择6个网格" name="searBtn1">选择网格<span class="layui-badge">6</span></button>
					</div>
					<div class="gridbox">
						<div class="layui-col-md1 toolbar">
							<ul>
								<li class="active" target-name="common"><i class="zkuasgm-icon">&#xe63d;</i>
									<p>常用功能</p>
								</li>
								<li target-name="search"><i class="zkuasgm-icon">&#xe60c;</i>
									<p>搜索</p>
								</li>
								<li target-name="maptool"><i class="zkuasgm-icon">&#xe60e;</i>
									<p>地图工具</p>
								</li>
							</ul>
						</div>
						<!-- 左1 -->
						<div class="layui-col-md2 box-l" id="move-left">
							<div class="grid-demo grid-demo-bg1">
								<div class=" hide" id="search">
									<div class="list-hd">
										<div class="layui-tab  layui-tab-card zk-tab-one">
											<ul class="layui-tab-title">
												<li class="layui-this">业务</li>
												<li>地址</li>
												<li>兴趣点</li>
											</ul>
											<div class="layui-tab-content">
												<div class="layui-tab-item layui-show">
													<div class="mysearch-box">
														<ul>
															<li>
																<div class="layui-row layui-col-space5">
																	<div class="layui-col-md12">
																		<button class="layui-btn layui-btn-fluid layui-btn-primary" title="已选择99个业务" name="searBtn2">业务<span class="layui-badge layui-bg-blue">99+</span></button>
																	</div>
																</div>
															</li>
															<li>
																<div class="layui-inline">
																	<input class="layui-input" name="id" autocomplete="off" size="20">
																</div>
																<button class="layui-btn layui-btn-normal" data-type="reload">搜索</button>
															</li>
														</ul>
													</div>
												</div>
												<!-- 2 -->
												<div class="layui-tab-item">
													<div class="mysearch-box">
														<ul>
															<li>
																<div class="layui-row layui-col-space5">
																	<div class="layui-col-md12">
																		<button class="layui-btn layui-btn-fluid layui-btn-primary" title="已选择99个业务" name="searBtn2">业务2<span class="layui-badge layui-bg-blue">99+</span></button>
																	</div>
																</div>
															</li>
															<li>
																<div class="layui-inline">
																	<input class="layui-input" name="id" autocomplete="off" size="20">
																</div>
																<button class="layui-btn layui-btn-normal" data-type="reload">搜索</button>
															</li>
														</ul>
													</div>
												</div>
												<!-- 3 -->
												<div class="layui-tab-item">
													<div class="mysearch-box">
														<ul>
															<li>
																<div class="layui-row layui-col-space5">
																	<div class="layui-col-md12">
																		<button class="layui-btn layui-btn-fluid layui-btn-primary" title="已选择99个业务" name="searBtn2">业务3<span class="layui-badge layui-bg-blue">99+</span></button>
																	</div>
																</div>
															</li>
															<li>
																<div class="layui-inline">
																	<input class="layui-input" name="id" id="test-table-demoReload" autocomplete="off" size="20">
																</div>
																<button class="layui-btn layui-btn-normal" data-type="reload">搜索</button>
															</li>
														</ul>
													</div>
												</div>
		
											</div>
										</div>
		
										<div>
											<form class="result-box">
												<span>搜索结果<i class="count">142</i></span>
											</form>
										</div>
										<form class="layui-form" action="">
											<div class="layui-form-item">
												<div class="search_resuit_filter_box">
													<select name="city" lay-verify="required">
														<option value="0">全部(142)</option>
														<option value="1">刑事案件(30)</option>
														<option value="2">危害国防(19)</option>
														<option value="3">案件(51)</option>
														<option value="4">盗窃(32)</option>
													</select>
												</div>
											</div>
										</form>
									</div>
									<div class="list-bd">
										<ul class="staff-cells">
											<li class="staff-cell">
												<div class="staff-cell_hd">
													<span class="zkuasgm-icon">&#xe610;<i></i></span>
												</div>
												<div class="staff-cell_bd">
													<span>老地方饭店内发生诈骗案</span>
													<span>广西壮族自治区贺州市平桂区西湾街道西发街60号老地方饭店</span>
												</div>
											</li>
											<li class="staff-cell">
												<div class="staff-cell_hd">
													<span class="zkuasgm-icon">&#xe610;<i></i></span>
												</div>
												<div class="staff-cell_bd">
													<span>老地方饭店内发生诈骗案</span>
													<span>广西壮族自治区贺州市平桂区西湾街道西发街60号老地方饭店</span>
												</div>
											</li>
											<li class="staff-cell">
												<div class="staff-cell_hd">
													<span class="zkuasgm-icon">&#xe610;<i></i></span>
												</div>
												<div class="staff-cell_bd">
													<span>老地方饭店内发生诈骗案</span>
													<span>广西壮族自治区贺州市平桂区西湾街道西发街60号老地方饭店</span>
												</div>
											</li>
											<li class="staff-cell">
												<div class="staff-cell_hd">
													<span class="zkuasgm-icon">&#xe610;<i></i></span>
												</div>
												<div class="staff-cell_bd">
													<span>老地方饭店内发生诈骗案</span>
													<span>广西壮族自治区贺州市平桂区西湾街道西发街60号老地方饭店</span>
												</div>
											</li>
											<li class="staff-cell">
												<div class="staff-cell_hd">
													<span class="zkuasgm-icon">&#xe610;<i></i></span>
												</div>
												<div class="staff-cell_bd">
													<span>老地方饭店内发生诈骗案</span>
													<span>广西壮族自治区贺州市平桂区西湾街道西发街60号老地方饭店</span>
												</div>
											</li>
											<li class="staff-cell">
												<div class="staff-cell_hd">
													<span class="zkuasgm-icon">&#xe610;<i></i></span>
												</div>
												<div class="staff-cell_bd">
													<span>老地方饭店内发生诈骗案</span>
													<span>广西壮族自治区贺州市平桂区西湾街道西发街60号老地方饭店</span>
												</div>
											</li>
											<li class="staff-cell">
												<div class="staff-cell_hd">
													<span class="zkuasgm-icon">&#xe610;<i></i></span>
												</div>
												<div class="staff-cell_bd">
													<span>老地方饭店内发生诈骗案</span>
													<span>广西壮族自治区贺州市平桂区西湾街道西发街60号老地方饭店</span>
												</div>
											</li>
											<li class="staff-cell">
												<div class="staff-cell_hd">
													<span class="zkuasgm-icon">&#xe610;<i></i></span>
												</div>
												<div class="staff-cell_bd">
													<span>老地方饭店内发生诈骗案</span>
													<span>广西壮族自治区贺州市平桂区西湾街道西发街60号老地方饭店</span>
												</div>
											</li>
											<li class="staff-cell">
												<div class="staff-cell_hd">
													<span class="zkuasgm-icon">&#xe610;<i></i></span>
												</div>
												<div class="staff-cell_bd">
													<span>老地方饭店内发生诈骗案</span>
													<span>广西壮族自治区贺州市平桂区西湾街道西发街60号老地方饭店</span>
												</div>
											</li>
										</ul>
									</div>
								</div>
								<div class="btn_box" id="common">
									<fieldset class="layui-elem-field">
										<legend>分类1</legend>
										<div class="layui-row">
											<div class="btn_item layui-col-xs4">
												<div class="grid-btn">
													<span><i class="zkuasgm-icon">&#xe679;</i></span>
												</div>
												<p>wifi探针</p>
											</div>
											<div class="btn_item layui-col-xs4">
												<div class="grid-btn">
													<span><i class="zkuasgm-icon">&#xe666;</i></span>
												</div>
												<p>摄像头</p>
											</div>
											<div class="btn_item layui-col-xs4">
												<div class="grid-btn">
													<span><i class="zkuasgm-icon">&#xe621;</i></span>
												</div>
												<p>PM2.5</p>
											</div>
											<div class="btn_item layui-col-xs4">
												<div class="grid-btn">
													<span><i class="zkuasgm-icon">&#xe851;</i></span>
												</div>
												<p>网格员</p>
											</div>
										</div>
									</fieldset>
		
									<fieldset class="layui-elem-field">
										<legend>分类2</legend>
										<div class="layui-row">
											<div class="btn_item layui-col-xs4">
												<div class="grid-btn">
													<span><i class="zkuasgm-icon">&#xe679;</i></span>
												</div>
												<p>wifi探针</p>
											</div>
											<div class="btn_item layui-col-xs4">
												<div class="grid-btn">
													<span><i class="zkuasgm-icon">&#xe666;</i></span>
												</div>
												<p>摄像头</p>
											</div>
											<div class="btn_item layui-col-xs4">
												<div class="grid-btn">
													<span><i class="zkuasgm-icon">&#xe621;</i></span>
												</div>
												<p>PM2.5</p>
											</div>
											<div class="btn_item layui-col-xs4">
												<div class="grid-btn">
													<span><i class="zkuasgm-icon">&#xe851;</i></span>
												</div>
												<p>网格员</p>
											</div>
											<div class="btn_item layui-col-xs4">
												<div class="grid-btn">
													<span><i class="zkuasgm-icon">&#xe851;</i></span>
												</div>
												<p>网格员</p>
											</div>  
										</div>
									</fieldset>
								</div>
								<div class="btn_box hide" id="maptool">
									<fieldset class="layui-elem-field">
										<div class="layui-row">
											<div class="btn_item layui-col-xs4">
												<div class="grid-btn">
													<span><i class="zkuasgm-icon">&#xe679;</i></span>
												</div>
												<p>线路两旁</p>
											</div>
											<div class="btn_item layui-col-xs4">
												<div class="grid-btn">
													<span><i class="zkuasgm-icon">&#xe666;</i></span>
												</div>
												<p>地点周边</p>
											</div>
											<div class="btn_item layui-col-xs4">
												<div class="grid-btn">
													<span><i class="zkuasgm-icon">&#xe621;</i></span>
												</div>
												<p>任意区域</p>
											</div>
											<div class="btn_item layui-col-xs4">
												<div class="grid-btn">
													<span><i class="zkuasgm-icon">&#xe851;</i></span>
												</div>
												<p>清空所有</p>
											</div>
											<div class="btn_item layui-col-xs4">
												<div class="grid-btn">
													<span><i class="zkuasgm-icon">&#xe851;</i></span>
												</div>
												<p>移除勾画面</p>
											</div>
											<div class="btn_item layui-col-xs4">
												<div class="grid-btn">
													<span><i class="zkuasgm-icon">&#xe851;</i></span>
												</div>
												<p>清晰度</p>
												<section class="hide more-content" >
					                                <div class="searchTool">
					                                    <div class="lodRange-control">
					                                        <div class="definition-box">
					                                            <input type="definition" min="2.5" max="100" step="2.5" data-rangeslider>
					                                        </div>
					                                        <span class="layui-badge-rim definitionoutput">50</span>
					                                    </div>
					                                </div>
					                            </section>
											</div>
											<div class="btn_item layui-col-xs4">
												<div class="grid-btn">
													<span><i class="zkuasgm-icon">&#xe851;</i></span>
												</div>
												<p>测量距离</p>
											</div>
											<div class="btn_item layui-col-xs4">
												<div class="grid-btn">
													<span><i class="zkuasgm-icon">&#xe851;</i></span>
												</div>
												<p>测量面积</p>
											</div>
										</div>
									</fieldset>
									<fieldset class="layui-elem-field">
										<div class="layui-row">
					                        <div class="btn_item layui-col-xs4">
					                            <div class="grid-btn choose-more">
					                                <span><i class="zkuasgm-icon">&#xe7d1;</i></span>
					                            </div>
					                            <p>可视域分析</p>
					                            <section class="hide more-content" >
					                                <div class="searchTool">
					                                    <div class="more-content-item">
					                                        <div class="grid-btn analysis-viewshed">
					                                            <span><i class="zkuasgm-icon">&#xe66e;</i></span>
					                                        </div>
					                                        <p>开始分析</p>
					                                    </div>
					                                    <div class="more-content-item">
					                                        <div class="grid-btn analysis-remove">
					                                            <span><i class="zkuasgm-icon">&#xe612;</i></span>
					                                        </div>
					                                        <p>清除</p>
					                                    </div>
					                                </div>
					                            </section>
					                        </div>
					                        <div class="btn_item layui-col-xs4">
					                            <div class="grid-btn analysis-sightline choose-more">
					                                <span><i class="zkuasgm-icon">&#xe604;</i></span>
					                            </div>
					                            <p>通视分析</p>
					                            <section class="hide more-content" >
					                                <div class="searchTool">
					                                    <div class="more-content-item" style="width: 75px">
					                                        <div class="grid-btn analysis-chooseView">
					                                            <span><i class="zkuasgm-icon">&#xe66e;</i></span>
					                                        </div>
					                                        <p>选取观察位置</p>
					                                    </div>
					                                    <div class="more-content-item">
					                                        <div class="grid-btn analysis-addPoint">
					                                            <span><i class="zkuasgm-icon">&#xe612;</i></span>
					                                        </div>
					                                        <p>添加目标点</p>
					                                    </div>
					                                    <div class="more-content-item">
					                                        <div class="grid-btn analysis-remove">
					                                            <span><i class="zkuasgm-icon">&#xe612;</i></span>
					                                        </div>
					                                        <p>清除</p>
					                                    </div>
					                                </div>
					                            </section>
					                        </div>
					                        <div class="btn_item layui-col-xs4">
					                            <div class="grid-btn choose-more">
					                                <span><i class="zkuasgm-icon">&#xe61d;</i></span>
					                            </div>
					                            <p>清晰度</p>
					                            <section class="hide more-content" >
					                                <div class="searchTool">
					                                	<!--<input type="hidden" class="single-slider"  value="0"/>-->
					                                    <div class="lodRange-control">
					                                        <div class="definition-box">
					                                            <input type="definition" min="2.5" max="100" step="2.5" data-rangeslider>
					                                        </div>
					                                        <span class="layui-badge-rim definitionoutput">50</span>
					                                    </div>
					                                </div>
					                            </section>
					                        </div>
					                    </div>
									</fieldset>
								</div>
							</div>
						</div>
						<!-- 左2 -->
					</div>
					
				</div>
				<!-- leftbox -->
	
				<div class="layui-col-md9 r-box" id="move-right">
					<div class="layui-row grid-demo">
						<div class="" >
							<span><i class="zkuasgm-icon toggleMenu" data-state="1">&#xe9be;</i></span>
						</div>
						<div class="flex-icon">
							<span><i class="zkuasgm-icon open">&#xe9be;</i></span>
						</div>
						<div class="layui-col-md12" id="r-title">
					        <div class="layui-row layui-col-space5 countboxs">
							  	<div>
							  		<ul>
							  			<li><span><i class="zkuasgm-icon bg1">&#xe6e5;</i>当日结办<i class="number">(131)</i></span></li>
							  			<li><span><i class="zkuasgm-icon bg2">&#xe64b;</i>累计事件<i class="number">(131)</i></span></li>
							  			<li><span><i class="zkuasgm-icon bg3">&#xe616;</i>实有房屋<i class="number">(131)</i></span></li>
							  			<li><span><i class="zkuasgm-icon bg4">&#xe61b;</i>累计出租屋<i class="number">(131)</i></span></li>
							  			<li><span><i class="zkuasgm-icon bg5">&#xe7e1;</i>当日采集<i class="number">(131)</i></span></li>
							  			<li><span><i class="zkuasgm-icon bg6">&#xe6e6;</i>累计排查<i class="number">(131)</i></span></li>
							  		</ul>
							  	</div>
							  	<div class="btn-box">
							  		<button class="layui-btn" target-name="incident" name="事件"><i class="zkuasgm-icon">&#xe64b;</i>事件<i class="tip">12</i></button>
							  		<button class="layui-btn" target-name="monitor" name="摄像头"><i class="zkuasgm-icon">&#xe666;</i>摄像头<i class="tip bg1">5</i></button>
							  		<button class="layui-btn" target-name="internet" name="物联网"><i class="zkuasgm-icon">&#xe7b2;</i>物联网<i class="tip bg3">8</i></button>
							  	</div>
							</div>
				        </div>
						<div class="layui-col-md12 b-map-box" id="r-map">
							<div class="grid-demo grid-demo-bg3">
								<div id="allmap"></div>
							</div>
						</div>
					</div>
					<div id="pointInfo-template">
					    <table>
					        <tr>
					            <td>经度:</td>
					            <td class="lon"></td>
					            <td>纬度:</td>
					            <td class="lat"></td>
					            <td>地址:</td>
					            <td class="address"></td>
					        </tr>
					    </table>
					</div>
				</div>
			</div>
		</div>
		
		<div class="fullScreenBtn" id="full-screen">
			<a href="####" title="全屏"><i class="zkuasgm-icon">&#xe605;</i></a>
		</div>
		
		
		<section class="hide" id="incident">
			<div class="layui-card">
				<div class="layui-card-body layadmin-takerates">
					<div class="layui-text">
						<ul>
							<li>
								<a href="javascript:;">中山“3·28”招商招才盛会引海内外主流媒体深度主流媒体...</a>
							</li>
							<li>
								<a href="javascript:;">南部组团创新创业项目路演会暨坦洲镇第四届创新创</a>
							</li>
							<li>
								<a href="javascript:;">市政协召开十二届第六次常委会</a>
							</li>
							<li>
								<a href="javascript:;">电子科大中山学院第三次党代会明确提出2025年建...</a>
							</li>
							<li>
								<a href="javascript:;">中山成为全省4K电视网络应用试点示范城市</a>
							</li>
							<li>
								<a href="javascript:;">《中山市城市设计管理规定（试行）》公示并征求意见</a>
							</li>
							<li>
								<a href="javascript:;">市工商局负责人做客“周五民声直播室”</a>
							</li>
							<li>
								<a href="javascript:;">我市从源头缓解幼儿园教师学历不高现状</a>
							</li>
						</ul>
					</div>
				</div>
			</div>
		</section>
		<section class="hide">
			<div id="monitor">
				<div class="layui-row">
					<div class="layui-col-xs4">
						<div class="grid-demo grid-demo-bg1">
							<img class="img" src="../../public/res/images/mir1.jpeg" />
						</div>
					</div>
					<div class="layui-col-xs4">
						<div class="grid-demo">
							<img class="img" src="../../public/res/images/mir2.jpeg" />
						</div>
					</div>
					<div class="layui-col-xs4">
						<div class="grid-demo grid-demo-bg1">
							<img class="img" src="../../public/res/images/mir3.jpg" />
						</div>
					</div>
				</div>
				<div class="layui-row">
					<div class="layui-col-xs4">
						<div class="grid-demo grid-demo-bg1">
							<img class="img" src="../../public/res/images/mir4.jpg" />
						</div>
					</div>
					<div class="layui-col-xs4">
						<div class="grid-demo">
							<img class="img" src="../../public/res/images/mir5.jpg" />
						</div>
					</div>
					<div class="layui-col-xs4">
						<div class="grid-demo grid-demo-bg1">
							<img class="img" src="../../public/res/images/mir6.jpg" />
						</div>
					</div>
				</div>
				<div class="layui-row">
					<div class="layui-col-xs4">
						<div class="grid-demo grid-demo-bg1">
							<img class="img" src="../../public/res/images/mir7.jpg" />
						</div>
					</div>
					<div class="layui-col-xs4">
						<div class="grid-demo">
							<img class="img" src="../../public/res/images/mir8.jpg" />
						</div>
					</div>
					<div class="layui-col-xs4">
						<div class="grid-demo grid-demo-bg1">
							<img class="img" src="../../public/res/images/mir9.jpg" />
						</div>
					</div>
				</div>
			</div>
		</section>
		<section class="layer">
			<div class="hide bd-content grid_layer" id="grid_layer">
				<div class="layui-row full-height">
					<div class="layui-col-xs4 layui-col-sm4 full-height">
						<div class="tree_box">
							<div class="layui-row">
								<div class="layui-col-xs12">
									<input class="layui-input" name="id"  placeholder="搜索内容..." autocomplete="off" size="30">
								</div>
							</div>
							<div class="swiper-container swiper1" name="grid_swiper1">
								<div class="swiper-wrapper">
									<div class="swiper-slide">网格</div>
									<div class="swiper-slide selected">菜单 2</div>
									<div class="swiper-slide">菜单 3</div>
									<div class="swiper-slide">菜单 4</div>
									<div class="swiper-slide">菜单 5</div>
									<div class="swiper-slide">菜单 6</div>
									<div class="swiper-slide">菜单 7</div>
									<div class="swiper-slide">菜单 8</div>
									<div class="swiper-slide">菜单 9</div>
									<div class="swiper-slide">菜单 10</div>
								</div>
							</div>
							<div class="swiper-container swiper2 lf-flow" name="grid_swiper2">
								<div class="swiper-wrapper">
									<div class="swiper-slide swiper-no-swiping">
										<div style="width: 100%;height: 100%;">上面导航栏可以滑动</div>
									</div>
									<div class="swiper-slide swiper-no-swiping">上面导航栏可以滑动2222 上面导航栏可以滑动2222 上面导航栏可以滑动2222 上面导航栏可以滑动2222 上面导航栏可以滑动2222 上面导航栏可以滑动2222 上面导航栏可以滑动2222 上面导航栏可以滑动2222 上面导航栏可以滑动2222 上面导航栏可以滑动2222 上面导航栏可以滑动2222 上面导航栏可以滑动2222 上面导航栏可以滑动2222 上面导航栏可以滑动2222 上面导航栏可以滑动2222 上面导航栏可以滑动2222 上面导航栏可以滑动2222 上面导航栏可以滑动2222 上面导航栏可以滑动2222
									</div>
									<div class="swiper-slide swiper-no-swiping">内容 213213123</div>
									<div class="swiper-slide swiper-no-swiping">内容 ressssssss</div>
									<div class="swiper-slide swiper-no-swiping">内容 ffffffffffff</div>
									<div class="swiper-slide swiper-no-swiping">内容 bbbbbbbbbbbbbbbbbvb</div>
									<div class="swiper-slide swiper-no-swiping">内容 bvcccccccccccbvb</div>
									<div class="swiper-slide swiper-no-swiping">内容 sdasdssssss</div>
									<div class="swiper-slide swiper-no-swiping">内容 oiouiouioiuoiuo</div>
									<div class="swiper-slide swiper-no-swiping">内容 m,jnkjhkhgjghjugh</div>
								</div>
							</div>
						</div>
					</div>
					<div class="layui-col-xs8 layui-col-sm8 rt-box">
						<div class="oncase_box rt-flow">
							<fieldset class="layui-elem-field">
 								 <legend>警务</legend>
 								 <ul>
									<li>
									<span class="layui-badge layui-badge-rim">警务网格＞平桂区＞羊头镇</span>
									<a class="layui-badge layui-bg-cyan" href="####" title="设置"><i class="zkuasgm-icon">&#xe615;</i></a>
									<a class="layui-badge layui-bg-blue" href="####" title="颜色"><i class="zkuasgm-icon">&#xe608;</i></a>
									<a class="layui-badge" href="####"><i class="zkuasgm-icon" title="删除">&#xe66d;</i></a>
									</li>
									<li>
									<span class="layui-badge layui-badge-rim">警务网格＞平桂区＞羊头镇</span>
									<a class="layui-badge layui-bg-cyan" href="####" title="设置"><i class="zkuasgm-icon">&#xe615;</i></a>
									<a class="layui-badge layui-bg-blue" href="####" title="颜色"><i class="zkuasgm-icon">&#xe608;</i></a>
									<a class="layui-badge" href="####"><i class="zkuasgm-icon" title="删除">&#xe66d;</i></a>
									</li>
								</ul>
 							</fieldset>
 							<fieldset class="layui-elem-field">
 								 <legend>综治</legend>
 								 <ul>
									<li>
									<span class="layui-badge layui-badge-rim">警务网格＞平桂区＞羊头镇</span>
									<a class="layui-badge layui-bg-cyan" href="####" title="设置"><i class="zkuasgm-icon">&#xe615;</i></a>
									<a class="layui-badge layui-bg-blue" href="####" title="颜色"><i class="zkuasgm-icon">&#xe608;</i></a>
									<a class="layui-badge" href="####"><i class="zkuasgm-icon" title="删除">&#xe66d;</i></a>
									</li>
									<li>
									<span class="layui-badge layui-badge-rim">警务网格＞平桂区＞羊头镇</span>
									<a class="layui-badge layui-bg-cyan" href="####" title="设置"><i class="zkuasgm-icon">&#xe615;</i></a>
									<a class="layui-badge layui-bg-blue" href="####" title="颜色"><i class="zkuasgm-icon">&#xe608;</i></a>
									<a class="layui-badge" href="####"><i class="zkuasgm-icon" title="删除">&#xe66d;</i></a>
									</li>
								</ul>
 							</fieldset>
						</div>
					</div>
				</div>	
			</div>
		</section>
		<section class="layer">
			<div class="hide bd-content business_layer" id="business_layer">
				<div class="layui-row full-height">
					<div class="layui-col-xs4 layui-col-sm4 full-height">
						<div class="tree_box">
							<div class="layui-row">
								<div class="layui-col-xs12">
									<input class="layui-input" name="id" id="test-table-demoReload" placeholder="搜索内容..." autocomplete="off" size="30">
								</div>
							</div>
							<div class="swiper-container swiper1" name="business_swiper1">
								<div class="swiper-wrapper">
								<div class="swiper-slide selected">业务</div>
								<div class="swiper-slide">菜单 2</div>
								<div class="swiper-slide">菜单 3</div>
								<div class="swiper-slide">菜单 4</div>
								<div class="swiper-slide">菜单 5</div>
								<div class="swiper-slide">菜单 6</div>
								<div class="swiper-slide">菜单 7</div>
								<div class="swiper-slide">菜单 8</div>
								<div class="swiper-slide">菜单 9</div>
								<div class="swiper-slide">菜单 10</div>
								</div>
							</div>
							<div class="swiper-container swiper2 lf-flow" name="business_swiper2">
								<div class="swiper-wrapper">
									<div class="swiper-slide swiper-no-swiping">
										<div style="width: 100%;height: 100%;">上面导航栏可以滑动</div>
									</div>
									<div class="swiper-slide swiper-no-swiping">上面导航栏可以滑动2222 上面导航栏可以滑动2222 上面导航栏可以滑动2222 上面导航栏可以滑动2222 上面导航栏可以滑动2222 上面导航栏可以滑动2222 上面导航栏可以滑动2222 上面导航栏可以滑动2222 上面导航栏可以滑动2222 上面导航栏可以滑动2222 上面导航栏可以滑动2222 上面导航栏可以滑动2222 上面导航栏可以滑动2222 上面导航栏可以滑动2222 上面导航栏可以滑动2222 上面导航栏可以滑动2222 上面导航栏可以滑动2222 上面导航栏可以滑动2222 上面导航栏可以滑动2222
									</div>
									<div class="swiper-slide swiper-no-swiping">内容 213213123</div>
									<div class="swiper-slide swiper-no-swiping">内容 ressssssss</div>
									<div class="swiper-slide swiper-no-swiping">内容 ffffffffffff</div>
									<div class="swiper-slide swiper-no-swiping">内容 bbbbbbbbbbbbbbbbbvb</div>
									<div class="swiper-slide swiper-no-swiping">内容 bvcccccccccccbvb</div>
									<div class="swiper-slide swiper-no-swiping">内容 sdasdssssss</div>
									<div class="swiper-slide swiper-no-swiping">内容 oiouiouioiuoiuo</div>
									<div class="swiper-slide swiper-no-swiping">内容 m,jnkjhkhgjghjugh</div>
								</div>
							</div>
						</div>
					</div>
					<div class="layui-col-xs8 layui-col-sm8 rt-box">
						<div class="oncase_box rt-flow">
							<fieldset class="layui-elem-field">
 								 <legend>警务</legend>
 								 <ul>
									<li>
									<span class="layui-badge layui-badge-rim">警务网格＞平桂区＞羊头镇</span>
									<a class="layui-badge layui-bg-cyan" href="####" title="设置"><i class="zkuasgm-icon">&#xe615;</i></a>
									<a class="layui-badge layui-bg-blue" href="####" title="颜色"><i class="zkuasgm-icon">&#xe608;</i></a>
									<a class="layui-badge" href="####"><i class="zkuasgm-icon" title="删除">&#xe66d;</i></a>
									</li>
									<li>
									<span class="layui-badge layui-badge-rim">警务网格＞平桂区＞羊头镇</span>
									<a class="layui-badge layui-bg-cyan" href="####" title="设置"><i class="zkuasgm-icon">&#xe615;</i></a>
									<a class="layui-badge layui-bg-blue" href="####" title="颜色"><i class="zkuasgm-icon">&#xe608;</i></a>
									<a class="layui-badge" href="####"><i class="zkuasgm-icon" title="删除">&#xe66d;</i></a>
									</li>
								</ul>
 							</fieldset>
 							<fieldset class="layui-elem-field">
 								 <legend>综治</legend>
 								 <ul>
									<li>
									<span class="layui-badge layui-badge-rim">警务网格＞平桂区＞羊头镇</span>
									<a class="layui-badge layui-bg-cyan" href="####" title="设置"><i class="zkuasgm-icon">&#xe615;</i></a>
									<a class="layui-badge layui-bg-blue" href="####" title="颜色"><i class="zkuasgm-icon">&#xe608;</i></a>
									<a class="layui-badge" href="####"><i class="zkuasgm-icon" title="删除">&#xe66d;</i></a>
									</li>
									<li>
									<span class="layui-badge layui-badge-rim">警务网格＞平桂区＞羊头镇</span>
									<a class="layui-badge layui-bg-cyan" href="####" title="设置"><i class="zkuasgm-icon">&#xe615;</i></a>
									<a class="layui-badge layui-bg-blue" href="####" title="颜色"><i class="zkuasgm-icon">&#xe608;</i></a>
									<a class="layui-badge" href="####"><i class="zkuasgm-icon" title="删除">&#xe66d;</i></a>
									</li>
								</ul>
 							</fieldset>
						</div>
					</div>
				</div>	
			</div>
		</section>
	</body>
	<script type="text/javascript" src="../../layuiadmin/layui/layui.js" ></script>
	<!--滑动条-->
	<script src="http://www.youhutong.com/static/js/jquery.js"></script>
	<script type="text/javascript" src="../../public/plugins/rangeslider/rangeslider.min.js" ></script>
	<script type="text/javascript" src="../../public/plugins/swiper/swiper-3.4.0.jquery.min.js" ></script>
	<script>
		// 百度地图API功能
		var map = new BMap.Map("allmap"); //创建百度地图实例，这里的allmap是地图容器的id
		var point = new BMap.Point(110.298537, 25.271245); //创建一个点对象，这里的参数是地图上的经纬度
		map.centerAndZoom(point, 15); //这里是将地图的中心移动到我们刚才创建的点；这里的12是地图的缩放界别；数值越大，地图看的越细
//		var opts2={mapTypes:[BMAP_NORMAL_MAP,BMAP_PERSPECTIVE_MAP,BMAP_HYBRID_MAP,BMAP_SATELLITE_MAP]};
//		map.addControl(new BMap.MapTypeControl(opts2));   //添加地图类型控件
		
		// 添加带有定位的导航控件
		  var navigationControl = new BMap.NavigationControl({
		    // 靠右上角位置
		    anchor: BMAP_ANCHOR_TOP_RIGHT ,
		    // LARGE类型
		    type: BMAP_NAVIGATION_CONTROL_SMALL ,
		    // 启用显示定位
		    enableGeolocation: true
		  });
		  map.addControl(navigationControl);
		  // 添加定位控件
		  var geolocationControl = new BMap.GeolocationControl({
		  	anchor: BMAP_ANCHOR_TOP_RIGHT,
		  	offset: new BMap.Size(8, 130)
		  });
		  geolocationControl.addEventListener("locationSuccess", function(e){
		    // 定位成功事件
		    var address = '';
		    address += e.addressComponent.province;
		    address += e.addressComponent.city;
		    address += e.addressComponent.district;
		    address += e.addressComponent.street;
		    address += e.addressComponent.streetNumber;
		    alert("当前定位地址为：" + address);
		  });
		  geolocationControl.addEventListener("locationError",function(e){
		    // 定位失败事件
		    alert(e.message);
		  });
		  map.addControl(geolocationControl);
		  map.enableScrollWheelZoom(true);
	</script>
	
	<script>
		layui.use(['jquery', 'layer', 'form', 'element'],function() {
			var form = layui.form;
			var $ = layui.jquery;
			var layer = layui.layer;
			var element = layui.element;//Tab的切换功能，切换事件监听等，需要依赖element模块
			var submit = function() {
				return false;
			};
			
			//删除百度地图左下角原生提示，如用3D地图，可删除该行代码
		  $('.anchorBL').remove();
			
			//左侧面板伸缩事件
			function openMenu(){
				$('.toggleMenu').data('state',1).html('&#xe9be;');
				$('#move-left').css('display','block');
				$('#move-right').css('left','316px');
			}
			function closeMenu(){
				$('.toggleMenu').data('state',0).html('&#xe9bf;') ;
				$('#move-left').css('display','none');
				$('#move-right').css('left','65px');
			}
			$('.toggleMenu').click(function(){
				
				var state =$(this).data('state');
				// console.log(typeof(state));
				// state>0 ? $(this).data('state',0).html('&#xe9bf;') : $(this).data('state',1).html('&#xe9be;')
				if(state>0){
					$(this).data('state',0).html('&#xe9bf;') ;
					$('#move-left').css('display','none');
					$('#move-right').css('left','65px');
				}else{
					openMenu()
					
				}  
			});
			//
			$('.flex-icon').click(function() {
				// $(this).has('.zkuasgm-icon')?addClass('close'):removeClass('close');
				$(this).find('.zkuasgm-icon').toggleClass('close');		
				$(this).find('.zkuasgm-icon').toggleClass('open');		//点击位置的icon的切换
				$('#move-left').stop().animate({				//左侧面板伸缩动画
					width: 'toggle',
					opacity: 'toggle'
				}, {
					queue: false,
					duration: 300
				});
				var para = $('#move-left').css("opacity");		//判断左侧是否伸缩
				if(para == '1') {							//缩进，右侧面板伸展
					$("#move-right").animate({
						width: "auto",
						left:"65px"
					}, {
						queue: false,
						duration: 300
					});
				} else {								//伸展，右侧面板缩进
					$("#move-right").animate({
						width: "auto",
						left:"316px"
					}, {
						queue: false,
						duration: 300
					});
				}
				
				$('.case_grid_box').find('button').toggleClass('hide');
			});
			
			//点击常用工具及地图工具侧边弹出对应侧栏
			$('.toolbar').find('li').click(function(){
				$('.flex-icon').find('.zkuasgm-icon').removeClass('close');		
				$('.flex-icon').find('.zkuasgm-icon').addClass('open');	
				$("#move-right").animate({
					width: "auto",
					left:"316px"
				}, {
					queue: false,
					duration: 300
				});
				$('#move-left').show();
				$(this).addClass('active');
				$(this).siblings().removeClass('active');
				var targetId=$(this).attr('target-name');
				$('#'+targetId+'').show();
				$('#'+targetId+'').siblings().hide();
				
				var tips = layer.tips();
				layer.close(tips);
				
				$('.case_grid_box').find('button:first-child').addClass('hide');
				$('.case_grid_box').find('button:last-child').removeClass('hide');
			});
			
			$(document).on('click', '.grid-btn', function() {
				$(this).addClass('active');
				$(this).parent().siblings().find('.grid-btn').removeClass('active');
			});
			
			var moreContentIndex;
			
			//点击常用工具及地图工具中按钮样式及状态切换
		    $(".grid-btn").click(function (e) {
		        $(this).parent().parent().parent().find('.grid-btn').removeClass('active');
		        $(this).addClass('active');
		
		        if($(this).parentsUntil(".layui-layer-wrap").is("html")){
		            moreContentIndex && layer.close(moreContentIndex);
		        }
		
		        e.stopPropagation();
		    });
		
		    $('.layui-tab').click(function () {
		        moreContentIndex && layer.close(moreContentIndex);
		    });
		    //地图工具多级工具按钮
		    $('.choose-more').click(function (e) {
		        moreContentIndex && layer.close(moreContentIndex);
		        let $this = $(this);
		        let offset = $this.offset();
		        var $content = $this.parent().children(".more-content");
		        moreContentIndex = layer.open({
		            type: 1,
		            shadeClose: true,
		            shade: false,
		            closeBtn: 1,
		            title: false,
		            offset: [offset.top + 50 +'px', offset.left + 50 + 'px'],
		            // area: ['400px'],
		            zIndex: 1000,
		            content: $content,
		            success: function(layero, index){
		            },
		            cancel: function(layero, index){
		            },
		        });
		        e.stopPropagation();
		
		    });
			
//			$('.type-box').find('li').click(function(){
//				$(this).addClass('active');
//				$(this).siblings().removeClass('active');
//				var targetId=$(this).attr('target-name');
//				$('#'+targetId+'').siblings('.select-box').slideUp();
//				$('#'+targetId+'').slideToggle();
//			})
			
			//右上角事件、摄像图、物联网按钮弹窗事件
			$('.btn-box').find('button').click(function(){
				var targetId=$(this).attr('target-name');
				var tpml=$('#'+targetId+'').html();
				var title=$(this).attr('name');
				layer.open({
				  type: 1,
				  skin: 'layui-layer-rim', //加上边框
				  title:title+'信息',
				  area: ['620px', 'auto'], //宽高
				  content: tpml
				});
			});
			//网格弹窗
			$('[name="searBtn1"]').on({
				click:function(){
					layer.closeAll();
					var $grid_content = $(".grid_layer");
					layer.open({
					  type: 1,
					  title: '选择网格',
					  shadeClose: true,
					  shade: 0,
					  area: ['50%', '60%'],
					  content: $grid_content
					});
					Slide('grid');//tab的滑动插件
				}
			});
			//业务弹窗
			$('[name="searBtn2"]').on({
				click:function(){
					layer.closeAll();
					var $business_content = $(".business_layer");
					layer.open({
					  type: 1,
					  title: '选择业务',
					  shadeClose: true,
					  shade: 0,
					  area: ['50%', '60%'],
					  content: $business_content
					});
					Slide('business');//tab的滑动插件
				}
			});
			
			//全屏监听
		    $("#full-screen").click(function () {
		        var docElm = window.frameElement;
		        var elm = document.documentElement;
		        var requestMethod = elm.requestFullScreen || elm.webkitRequestFullScreen || elm.mozRequestFullScreen || elm.msRequestFullscreen;
		        if (elm.msRequestFullscreen) {
		            elm = docElm;
		        }
		        requestMethod.call(elm);
		
		        if (!isFullscreenForNoScroll()) {
		            (docElm.requestFullscreen && docElm.requestFullscreen()) ||
		            (docElm.mozRequestFullScreen && docElm.mozRequestFullScreen()) ||
		            (docElm.webkitRequestFullscreen && docElm.webkitRequestFullscreen()) ||
		            (docElm.msRequestFullscreen && docElm.msRequestFullscreen());
		        } else {
		            // 判断各种浏览器，找到正确的方法
		            document.exitFullscreen ? document.exitFullscreen() :
		                document.mozCancelFullScreen ? document.mozCancelFullScreen() :
		                    document.webkitExitFullscreen ? document.webkitExitFullscreen() : '';
		        }
		        function isFullscreenForNoScroll() {
		            return document.fullScreen || document.mozFullScreen || document.webkitIsFullScreen;
		        }
		    });
		});
	</script>
	<script>
		//业务及网格弹框中tab滑动功能插件参数设置
		function Slide(param) {
			function setCurrentSlide(ele, index) {
				//$(".swiper1 .swiper-slide").removeClass("selected");
				$('[name="'+param+'_swiper1"]').find('.swiper-slide').removeClass("selected");
				ele.addClass("selected");
				//swiper1.initialSlide=index;
			}
			var initIndex=0;
			var sp1=$('[name="'+param+'_swiper1"]');
			var sp2=$('[name="'+param+'_swiper2"]');
			
			initIndex=$('[name="'+param+'_swiper1"]').find('.swiper-slide.selected').index();
			
			var swiper1 = new Swiper(sp1, {
				//设置slider容器能够同时显示的slides数量(carousel模式)。
				//可以设置为number或者 'auto'则自动根据slides的宽度来设定数量。
				//loop模式下如果设置为'auto'还需要设置另外一个参数loopedSlides。
				slidesPerView: 3.5,
				paginationClickable: true, //此参数设置为true时，点击分页器的指示点分页器会控制Swiper切换。
				spaceBetween: 10, //slide之间的距离（单位px）。
				freeMode: true, //默认为false，普通模式：slide滑动时只滑动一格，并自动贴合wrapper，设置为true则变为free模式，slide会根据惯性滑动且不会贴合。
				loop: false, //是否可循环
				initialSlide:initIndex,//初始定位
				onTab: function(swiper) {
					var n = swiper1.clickedIndex;
				}
			});
			swiper1.slides.each(function(index, val) {
				var ele = $(this);
				ele.on("click", function() {
					setCurrentSlide(ele, index);
					swiper2.slideTo(index, 500, false);
					//mySwiper.initialSlide=index;
				});
			});
	
			var swiper2 = new Swiper(sp2, {
				//freeModeSticky  设置为true 滑动会自动贴合  
				direction: 'horizontal', //Slides的滑动方向，可设置水平(horizontal)或垂直(vertical)。
				loop: false,
				initialSlide:initIndex,
				//effect : 'fade',//淡入
				//effect : 'cube',//方块
				//effect : 'coverflow',//3D流
				//effect : 'flip',//3D翻转
				autoHeight: true, //自动高度。设置为true时，wrapper和container会随着当前slide的高度而发生变化。
				onSlideChangeEnd: function(swiper) { //回调函数，swiper从一个slide过渡到另一个slide结束时执行。
					var n = swiper.activeIndex;
					setCurrentSlide($(".swiper1 .swiper-slide").eq(n), n);
					swiper1.slideTo(n, 500, false);
				}
			});
		};
	</script>
</html>
